<template>
	<div>
		<div class="message-item !py-[10px]">
			<div v-if="source.unreadStatus === 0" class="time">
				<span>{{ source.date | time }}</span>
			</div>
			<div class="main relative" :class="{ self: source.self }">
				<div class="flex items-center" :style="{ flexDirection: source.self ? 'row-reverse' : '' }">
					<img class="avatar !w-[45px] !h-[45px] !rounded-[50%]" :src="source.photo" />
					<div v-if="source.msgType === 0" class="content">
						<div class="text" v-html="replaceFace(source.content)"></div>
					</div>
					<div v-if="source.msgType === 1" class="content content-img">
						<div v-if="source.msgType === 1" class="text-img">
							<el-image class="img" :src="source.content" :preview-src-list="[source.content]"></el-image>
						</div>
					</div>
					<div v-if="source.msgType === 2" class="content content-audio">
						<div class="box">
							<audio class="audio" :src="source.content" controls="controls"></audio>
						</div>
					</div>
					<div v-if="source.msgType === 3" class="content content-video" @click="playVideo(source.content)">
						<video :src="source.content.split('?')[0]" playsinline></video>
						<img src="@/assets/images/play.png" alt="" />
					</div>
					<div v-if="source.msgType === 4" class="w-[244px] py-[7px] px-[12px] flex items-center bg-white rounded-[8px] mb-[5px]">
						<div class="w-[71px] h-[71px] mr-[12px]">
							<el-image class="w-full h-full rounded-[8px]" :src="source.content.picUrl" :preview-src-list="[]"> </el-image>
						</div>
						<div class="flex flex-col items-start" :style="{ width: 'calc(100% - 83px)' }">
							<div class="text-[#333333] text-[14px] truncate w-full text-left">{{ source.content.goodsName }}</div>
							<div class="text-[#CCCCCC] text-[12px] my-[8px]">销量{{ source.content.sales }}</div>
							<div class="flex items-baseline text-[#F14A46]"><span class="text-[12px]">￥</span><span class="text-[18px] font-bold">124.9</span></div>
						</div>
					</div>
				</div>
				<div v-if="source.unreadStatus === 1 && source.self" class="text-[#999999] text-[12px] mt-[2px] pr-[75px]">已读</div>
			</div>
		</div>
		<el-dialog title="视频预览" :visible.sync="dialogVisible" width="440px">
			<video-player ref="videoPlayer" style="'height:'+ videoHeight +'px;width:'+ videoWidth +'px'" class="vjs-custom-skin" :options="playerOptions" :playsinline="true"> </video-player>
		</el-dialog>
	</div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
import dayjs from 'dayjs';
export default {
	name: 'Item',
	components: {
		videoPlayer,
	},
	filters: {
		time(date) {
			return dayjs(date).format('HH:mm');
		},
	},
	props: {
		source: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			dialogVisible: false,
			videoWidth: 0,
			videoHeight: 0,
			playerOptions: {
				playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
				autoplay: true, //如果true,浏览器准备好时开始回放。
				muted: false, // 默认情况下将会消除任何音频。
				loop: false, // 导致视频一结束就重新开始。
				preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				language: 'zh-CN',
				fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				sources: [
					{
						type: '', //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
						src: '', //url地址
					},
				],
				notSupportedMessage: '此视频暂无法播放，请稍后再试',
				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: true,
					fullscreenToggle: true, //全屏按钮
				},
				width: 400,
				height: 0,
			},
		};
	},
	methods: {
		playVideo(content) {
			this.videoSrc = content.split('?')[0];
			this.$set(this.playerOptions, 'sources', [{ src: this.videoSrc, type: '' }]);
			this.videoWidth = this.getQueryVariable(content, 'width');
			this.videoHeight = this.getQueryVariable(content, 'height');
			this.$set(this.playerOptions, 'height', 400 * (this.videoHeight / this.videoWidth));
			this.dialogVisible = true;
		},
		getQueryVariable(url, variable) {
			const chats = url.split('?')[1];
			let arr = chats.split('&');
			for (let i = 0; i < arr.length; i++) {
				const pair = arr[i].split('=');
				if (pair[0] === variable) {
					console.log(pair[0]);
					return pair[1];
				}
			}
			return false;
		},
		replaceFace(con) {
			if (con && con.includes('/:')) {
				const emojis = this.emojis;
				for (let i = 0; i < emojis.length; i++) {
					let img = require('../../../../../../static/emoji/' + emojis[i].file);
					con = con.replace(emojis[i].reg, `<img src="${img}"  alt="" style="vertical-align: middle; width: 24px; height: 24px" />`);
				}
				return con;
			}
			return con;
		},
	},
};
</script>

<style scoped></style>
